<html>
 <head>
  <link rel="stylesheet" type="text/css" href="..//core/foam.css" />
  <script language="javascript" src="../core/bootFOAM.js"></script>
  <script language="javascript" src="demos.js"></script>
  <title>FOAM </title>
 </head>
 <body>
  <script language="javascript">
    var timer = Timer.create({});

    var timerView = DetailView.create({ model: timer.model_, showActions: true });
    document.writeln(timerView.toHTML());
    timerView.set(timer);
    timerView.initHTML();

    var space = Canvas.create({width: 2500, height: 2700, background:'#fff'});
    space.write(document);

    var mouse = Mouse.create();
    mouse.connect(space.$);

    var M = Movement;
    var is = [
       [M.linear,                       'red'],
       [M.accelerate,                   'green'],
       [M.avg(M.linear, M.accelerate),  'brown'],
       [M.easeIn(0.33),                 'blue'],
       [M.easeIn(0.66),                 'blue'],
       [M.easeIn(1.0),                  'blue'],
       [M.easeIn(1.0).o(M.easeIn(1.0)), 'darkBlue'],
       [M.easeOut(0.25),                'yellow'],
       [M.ease(0.25,0.25),              'pink'],
       [M.avg(M.easeIn(0.25), M.easeOut(0.25)), 'black'],
       [M.bounce(0.15, 0.02,1),         'red'],
       [M.bounce(0.15, 0.02,2),         'red'],
       [M.bounce(0.15, 0.02,3),         'red'],
       [M.stepBack(0.05),               'orange'],
       [M.bounce(0.5, 0.2,3).o(M.stepBack(0.05)),       'black'],
//       [M.back,                         'orange'],
//       [M.back.o(M.back),               'purple'],
//       [M.back.o(M.accelerate),         'lightGreen'],
    ];

    var clocks = [];
    var graphs = [];
    var ms = [];
    for ( var i = 0 ; i < is.length ; i++ )
    {
      clocks[i] = ClockView.create({x:250,y:50+i*100,r:40,color:is[i][1]});
      graphs[i] = Graph.create({x:5,y:50+i*100,width:200,height:95,style:'Line',graphColor:null,lineWidth:2,drawShadow:false,capColor:is[i][1], data:[]});
//      graphs[i] = Graph.create({x:250,y:50,width:1500,height:1200,style:'Line',graphColor:null,lineWidth:3,drawShadow:false,capColor:is[i][1], data:[]});
      space.addChild(clocks[i]);
      space.addChild(graphs[i]);

      (function (i) {
        var start = clocks[i].x;
        clocks[i].propertyValue('x').addListener(function() {
          graphs[i].data.push(clocks[i].x-start);
          if ( graphs[i].data.length > 100 ) graphs[i].data.shift();
        });

        ms[i] = Movement.animate(
          2000,
          function(evt) {
            clocks[i].a = Movement.distance(evt.offsetX, evt.offsetY)/clocks[i].r;
            clocks[i].x = evt.offsetX;
            clocks[i].y = evt.offsetY + i*100;
          },
          is[i][0]);
      })(i);
    }

// graphs[2].width = 900; graphs[2].height= 500; graphs[2].x = 300;

    space.$.onmousedown = function(evt) {
      for ( var i = 0 ; i < is.length ; i++ )
      {
//        console.log(ms[i]);
        ms[i](evt);
      }
    };

    Events.dynamic(function () {
       timer.time;
       space.paint();
    });

    timer.start();
  </script>

 </body>
</html>
